<template>
	<div>
		<!-- <Base /> -->
		<!-- <Mitt /> -->
		<!-- <composition-api></composition-api> -->
		<!-- <composition-api-setup :setups="'setup函数'"></composition-api-setup>
		<div>祖父组件：{{location}}</div>
		<button @click="fn">改变location的值</button>
		<br />
		<br />
		<div>双向数据绑定：</div>
		姓名 {{username}}：
		<input v-model="username" />
		<provides></provides>-->
		<!-- 模版引用 -->
		<!-- <template-refs></template-refs> -->
		<!-- <ProryReflect></ProryReflect> -->
		<teleports></teleports>
	</div>
</template>

<script>
// import ProryReflect from "@/views/prory_reflect/prory-reflect.vue";
// import CompositionApi from "@/views/composition-api.vue";
// import CompositionApiSetup from "@/views/composition-api-setup.vue";
// import provides from "@/views/provide.vue";
// import Mitt from "@/views/mitt.vue";
// import Base from "@/views/base.vue";
// import TemplateRefs from "@/views/template-refs.vue";
import teleports from "@/views/01teleport.vue";
export default {
	name: "App",
	components: {
		// "composition-api": CompositionApi,
		// "composition-api-setup": CompositionApiSetup,
		// provides
		// "template-refs": TemplateRefs
		// ProryReflect
		teleports
	},
	setup() {
		// let location = ref("传递祖父的参数");
		// var userInfos = reactive({
		// 	username: "张三",
		// 	age: 20
		// });
		// let fn = () => {
		// 	location.value = "改变值";
		// };
		// provide("location", location);
		// provide("userInfos", readonly(userInfos));
		// return {
		// 	location,
		// 	fn,
		// 	...toRefs(userInfos)
		// };
	}
};
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}
</style>
